<template>
  <div class="app-container">
    <!-- 后台管理-菜单 -->
    <el-button type="success" icon="el-icon-edit" @click="addMenus">新增菜单</el-button>
    <!-- 
      支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，
      必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
      children 与 hasChildren 都可以通过 tree-props 配置。
      default-expand-all 是否默认展开所有节点
    -->
    <el-table 
      :data="tableData" 
      style="width: 100%" 
      row-key="id" 
      default-expand-all
      :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
      <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <el-table-column prop="code" label="权限点代码">
      </el-table-column>
      <el-table-column label="操作" width="180">
      </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <el-dialog
      title="创建菜单"
      :visible ="dialogVisible"
      width="50%"
      @close="diolgClose">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="200px">
        <el-form-item label="权限组分类">
          <el-radio-group v-model="addForm.isPoint">
            <el-radio label="menu"></el-radio>
            <el-radio label="points"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="addForm.pid">
            <el-option label="主导航" :value="0">主导航</el-option>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="addForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diolgClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {menusList, menusAdd} from '@/api/menus'
// import transTree from '@/utils/transTree'
export default {
  name: 'Menus',
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      addForm:{
        isPoint: '',//是否权限点
        pid: '',//父 ID
        code: '',//菜单代码 全局唯一
        title: ''//菜单标题
      },
      rules:{
        code:[
          { required: true, message: '代码不能为空', trigger: 'blur' },
        ],
        title:[
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
      },
      options: []
    }
  },
  mounted(){
    this.getTableList()
  },
  methods: { 
    // 递归方法 把pionts字段换位childs 
    convertPointsToChilds(obj) {  
        if (Array.isArray(obj)) {  
          // 如果obj是数组，递归处理每个元素  
          return obj.map(this.convertPointsToChilds);  
        } else if (typeof obj === 'object' && obj !== null) {  
          // 如果obj是对象，递归处理childs和points  
          if (obj.hasOwnProperty('childs')) {  
            obj.childs = this.convertPointsToChilds(obj.childs); // 递归处理childs  
          }  
          if (obj.hasOwnProperty('points')) {  
            obj.childs = obj.points; // 将points重命名为childs  
            delete obj.points; // 删除原来的points属性  
          }  
          return obj;  
        }  
        // 如果obj不是数组也不是对象，直接返回它（基本类型）  
        return obj;  
    },
    async getTableList() {
      const res = await menusList()
      // res.forEach(item => {
      //   item.childs.forEach(itemm => {
      //     itemm.childs = itemm.points
      //   })
      // })
      this.options = res
      this.tableData = this.convertPointsToChilds(res)  
    },
    // 打开新增弹框
    addMenus() {
      this.dialogVisible = true
    },
    // 关闭
    diolgClose() {
      this.dialogVisible = false
      // 清空列表
      this.addForm = {
        isPoint: '',//是否权限点
        pid: '',//父 ID
        code: '',//菜单代码 全局唯一
        title: ''//菜单标题
      },
      // 清空校验规则
      this.$refs.addForm.resetFields();
    },
    // 确认按钮
    confirm() {
      // 兜底校验
      this.$refs.addForm.validate(async(valid)=> {
        if(valid) {
          // 校验通过
          // 掉新增接口
          await menusAdd(this.addForm)
          // 关闭弹窗
          this.diolgClose()
          // 刷新列表
          this.getTableList()
          // 提示用户
          this.$message.success('新增成功')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
  margin: 20px;
}
</style>